<template>
    <div style="margin-top:10px;">
        <van-field
          v-model="name"
          label="资质名称"
          clearable
          placeholder="请输入资质名称"
        />
        <van-divider  :style="{ color: '#bfbfbf', borderColor: '#bfbfbf', padding: '0 16px' }"/>
        <div style="text-align:center;">
            <van-uploader multiple :max-count="1" reupload v-model="photo" style="margin-left:10px;display: inline-block;;" :preview-size="[357, 300]" :after-read="afterRead" />
        </div>
        <van-divider style="margin-top:10px;"  :style="{ color: '#bfbfbf', borderColor: '#bfbfbf', padding: '0 16px' }"/>
       <div class="addzizhi-add">
        <van-button style="width:90%;margin-left:5%;" type="success" @click="add" block>新增</van-button>
       </div>
        
       </div>
</template>
<script>
import { defineComponent, reactive, toRefs, watchEffect, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { UploadQualifications,addQualifications } from "@/api/manage";
import {
  showSuccessToast,
  showFailToast,
  showLoadingToast,
  showToast,
} from "vant";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const data = reactive({
      id: route.params.id.toString(),
      name:"",
      photo:[],
      img:""
      //页面数据放置区
    });
    const methods = {
  
    };
    const event = {
        //新增资质
        add(){
          if(!data.img){
              showToast("请稍等,图片上传中");
              return
          }
            showLoadingToast({
              message: "加载中...",
              forbidClick: true,
              loadingType: "spinner",
            });
            addQualifications({
              gid: data.id,
              name: data.name,
              url: data.img,
            }).then((res) => {
              showToast("添加成功");
              setTimeout(()=>{
                router.push("/shop/spzizhi/" + data.id);
              },1000)
             
            });
        },
        //上传商品资质图片
        afterRead(file) {
        // 此时可以自行将文件上传至服务器
        const formData = new FormData();
        formData.append("file", file.file);
        UploadQualifications(formData).then((res) => {
            // data.photo=[];
        //   data.photo.push({ url: res });

          data.img=res;
        }) .catch((error) => {
    // 处理错误
    console.error('An error occurred:', error);
  });;
      },
    };
    onMounted(() => {
  
    });
    return {
      ...toRefs(data),
      ...event,
    };
  },
});
</script>
<style>
.addzizhi-add{
    /* border-top:1px solid #f5f5f5;
    padding-top:10px; */
}
</style>